Atom Effects
effectを管理し、atomの同期や初期化ができる
useEffectと異なり、Reactの文脈の外でeffectの管理ができる
renderingのタイミングに依存しない
[]の中に複数のeffect関数を指定する
code:ts
const myState = atom({
key: 'MyKey',
default: null,
effects: [
() => {
...effect 1...
return () => ...cleanup effect 1...;
},
() => { ...effect 2... },
],
});
例えば以下のようなことが出来る
外部のstoreをsubcribeして、storeが更新された時にatomも更新
atomが更新された時に何らかの処理をする
e.g. loggingとしてどこかに出力
e.g. ページ遷移時にhistoryをスタック
setSelf()
atomを更新する
onSet
atomが更新された時に呼び出すcallbackを登録する
callbackの引数としてnewValue、oldValue、isResetが提供される
trigger()
atom effectsを発火させたactionの種類を返す
"get" | "set"を返す
参考
Recoilを使って非制御フォームを作る例
formの中身を監視してatomを更新するためにeffectsを使っている
割と制約がある
effectsの関数内から、他のatomを参照できない
effects関数の中では、当然、他のhooksは呼べない
例えば、fetchにreact-queryを使いたいのであれば代わりにuseRecoilCallbackを使う